<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
<!--  <button id="btn" onclick="onClickBtn()">点击事件</button>-->
  <button id="btn" >点击事件</button>
  <script>
    // 1. 通过dom绑定事件
    // document.getElementById('btn').onclick = function () {
    //   alert("点击了按钮");
    // };

    // 2. 可以直接在标签里添加时间，执行对应的方法
    // function onClickBtn() {
    //   alert("第二种方式")
    // }

    // 3. 通过addEventListener进行事件添加和移除
    var btnDom = document.getElementById("btn");
    btnDom.addEventListener("click",onClick1)
    function onClick1(){
      alert("第三种绑定方式");
    }

    btnDom.addEventListener("click",function (){
      // this指向触发事件的dom
      alert(this.innerText)
      alert("第三种绑定方式2");
    })

    btnDom.removeEventListener("click",onClick1);
</script>
</body>
</html>